import React, {Component} from 'react'
import {connect} from 'react-redux'
import {setUserInfo} from '../../actions'
import { List, NavBar, Button } from 'antd-mobile'
import DefaultLayout from '../../layouts/default_layout'
import TabMenu from '../../layouts/tab_menu'
import {modal, post} from '../../common/js/utils'
import {withRouter} from 'react-router-dom'
const Item = List.Item
const Brief = Item.Brief

function mapStateToProps(state, props) {
  return {
    userInfo: state.userInfo
  }
}

const mapDispatchToProps = dispatch => {
  return {
    setUserInfo(value) {
      dispatch(setUserInfo(value))
    }
  }
}

@connect(mapStateToProps, mapDispatchToProps)
@withRouter
class UserCenter extends Component {

  logout = (e) => {
    e.preventDefault()
    modal.confirm('确定退出？').then(() => {
      post('/users/logout', {}, loading => { modal.loading(loading) }).then((res) => {
        if (res.result === 1) {
          window.location.reload()
        }
      })
    })
  }

  render() {
    const {userInfo, history} = this.props
    return (
      <DefaultLayout
        header={
          <NavBar>By：ChenJiYuan</NavBar>
        }
        footer={
          <TabMenu />
        }
      >
        <List>
          <Item
            arrow={'horizontal'}
            onClick={
              e => history.push('/user-info')
            }
            thumb={
              <img
                style={{
                  height: 50,
                  width: 50
                }}
                src={userInfo.avatar}
                alt="用户头像"/>
            }
          >{userInfo.nickname}<Brief>{userInfo.username}</Brief></Item>
          <div
            style={{
              padding: '10px 5px 0 5px'
            }}
          >
            <Button onClick={this.logout} size={'large'} type={'warning'} >注销登录</Button>
          </div>
        </List>
      </DefaultLayout>
    )
  }
}

export default UserCenter
